<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
        事件修饰符：
        鼠标事件
         1. .stop   停止事件的冒泡
         2. .self 只监听自己本身事件  忽略冒泡
         3. .once  设置事件一次有效

        键盘事件：
            1. enter  监听回车键
            2. left
            3. right
            4. up
            5. down
            6. space

@keyup.enter


-->
<div id="app">

    <div style="width: 100px;height: 100px;border:1px solid red;" @click.self="fn2">
        <button @click.once="fn1">单击</button>
    </div>


    <input type="text" v-model="info" @keyup.enter="print">

</div>

<script type="text/javascript">
    const vm = new Vue({
        el:'#app',
        data:{
            info:''
        },
        methods:{
            fn1(){
                console.log("fn1")
            },
            fn2(){
                console.log("fn2")
            },
            print() {
                console.log(this.info)
            }
        }
    })
</script>

</body>
</html>
